import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

///
/// des:
///
class QQLogin extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _QQLogin();
  }
}

class _QQLogin extends State<QQLogin> {
  //账号
  String _accountValue = "";
  TextEditingController _accountController; // 输入框的控制器

  //密码
  String _pwdValue = "";
  TextEditingController _pwdController;

  //是否明文展示密码
  bool _obscurePwd = true;

  //提交按钮是否可用
  bool submitEnable = false;

  //是否正在登录
  bool _isLogin = false;

  ///
  /// 检查提交按钮是否可以提交，账号和密码不为空可用
  ///
  void checkSubmitEnable() {
    setState(() {
      submitEnable = _accountValue.isNotEmpty && _pwdValue.isNotEmpty;
    });
  }

  ///
  /// 提交
  ///
  void submit(BuildContext aContext) async {
    showLoading(aContext);

//    await login(_accountValue, _pwdValue).then((value) {
//      if (value) {
//        Scaffold.of(aContext).showSnackBar(SnackBar(
//          content: Text('登录成功'),
//        ));
//      } else {
//        Scaffold.of(aContext).showSnackBar(SnackBar(
//          content: Text('账号密码错误'),
//        ));
//      }
//      hideLoading();
//    });
  }

  ///
  /// 取消loading
  ///
  void hideLoading() {
    Navigator.of(context).pop(); // 弹出 关闭弹窗
  }

  ///
  /// 展示loading
  ///
  void showLoading(BuildContext aContext) {
    showDialog<Null>(
        // 显示对话框
        context: aContext, // 上下文
        barrierDismissible: true, // 是否可以点击外部关闭
        builder: (context) {
          // 构建器
          return _createLoading(); // 创建loading
        });
  }

  /// 模拟登录，这里应该是访问后台接口
  ///
  Future<bool> login(String account, String pwd) async {
    return Future.delayed(Duration(seconds: 2), () {
      return account == '123456' && pwd == '123456';
    });
  }

  @override
  Widget build(BuildContext aContext) {
    // 账号 输入框
    _accountController = TextEditingController.fromValue(TextEditingValue(
        text: _accountValue,
        selection: TextSelection.fromPosition(
            TextPosition(offset: _accountValue.length))));
    // 密码 输入框
    _pwdController = TextEditingController.fromValue(TextEditingValue(
        text: _pwdValue,
        selection: TextSelection.fromPosition(
            TextPosition(offset: _pwdValue.length))));
    return Container(
      // 容器
      child: Column(
        // 列
        children: <Widget>[
          SizedBox(
            // 空白
            height: 100,
          ),
          Center(
            // 居中的容器, 里面有一个圆形的容器, 里面有一个FlutterLogo
            child: Container(
              // 容器
              decoration: BoxDecoration(
                shape: BoxShape.circle, // 圆形
                border: Border.all(color: Colors.blue),
              ),
              padding: EdgeInsets.all(10), // 内边距
              child: FlutterLogo(
                // FlutterLogo
                size: 70,
              ),
            ),
          ),
          Padding(
            // 内边距--账号输入框
            padding: EdgeInsets.only(left: 50, right: 50, top: 40),
            child: _createAccountTextField(),
          ),
          Padding(
            // 内边距--密码输入框
            padding: EdgeInsets.only(left: 50, right: 50, top: 20),
            child: _createPwdTextField(),
          ),
          SizedBox(
            // 空白
            height: 50,
          ),
          _createSubmitBtn(), // 提交按钮
          Expanded(
            // 扩展
            flex: 1,
            child: Container(),
          ),
          Padding(
            // 内边距--忘记密码和用户注册
            padding: EdgeInsets.only(bottom: 20, top: 5),
            child: _createPwdAndRegister(),
          ),
        ],
      ),
    );
  }

  ///
  /// 创建账号输入框
  ///
  Widget _createAccountTextField() {
    return TextField(
      controller: _accountController,
      // 绑定控制器
      keyboardType: TextInputType.number,
      // 键盘类型
      inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))],
      // 输入格式
      decoration: InputDecoration(
        // 输入框的装饰
        fillColor: Color(0x30cccccc),
        // 填充颜色
        filled: true,
        // 是否填充
        enabledBorder: OutlineInputBorder(
            // 边框
            borderSide: BorderSide(color: Color(0x00FF0000)), // 边框颜色
            borderRadius: BorderRadius.all(Radius.circular(100))),
        // 边框圆角
        hintText: '手机号/邮箱',
        // 提示文本
        focusedBorder: OutlineInputBorder(
            // 聚焦时的边框
            borderSide: BorderSide(color: Color(0x00000000)), // 边框颜色
            borderRadius: BorderRadius.all(Radius.circular(100))),
        suffixIcon: _accountValue.isEmpty // 后缀图标
            ? null // 为空
            : IconButton(
                // 不为空
                icon: Icon(Icons.clear), // 图标
                color: Color(0xFFcccccc), // 颜色
                iconSize: 16, // 图标大小
                onPressed: () {
                  // 点击事件----清空输入框---按钮被点击
                  setState(() {
                    // 设置状态, 有变化更新UI
                    _accountValue = '';
                    checkSubmitEnable(); // 检查提交按钮是否可用
                  });
                },
              ),
      ),
      textAlign: TextAlign.center,
      // 文本对齐方式
      onChanged: (value) {
        // 输入框内容变化时的回调 监听
        setState(() {
          _accountValue = value;
          checkSubmitEnable();
        });
      },
    );
  }

  ///
  /// 创建密码输入框
  ///
  Widget _createPwdTextField() {
    return TextField(
      controller: _pwdController,
      // 绑定控制器
      decoration: InputDecoration(
        // 输入框的装饰
        fillColor: Color(0x30cccccc),
        // 填充颜色
        filled: true,
        enabledBorder: OutlineInputBorder(
            // 边框
            borderSide: BorderSide(color: Color(0x00FF0000)), // 边框颜色
            borderRadius: BorderRadius.all(Radius.circular(100))),
        hintText: '输入密码',
        focusedBorder: OutlineInputBorder(
            // 聚焦时的边框
            borderSide: BorderSide(color: Color(0x00000000)),
            borderRadius: BorderRadius.all(Radius.circular(100))),
        suffixIcon: _pwdValue.isEmpty // 后缀图标
            ? null
            : IconButton(
                // 不为空, 是一个IconButton
                icon: Icon(Icons.clear), // 按钮图标
                color: Color(0xFFcccccc), // 按钮颜色
                iconSize: 16, // 按钮大小
                onPressed: () {
                  // 按钮被点击的回调
                  setState(() {
                    _pwdValue = '';
                    checkSubmitEnable();
                  });
                },
              ),
        prefixIcon: _pwdValue.isEmpty // 前缀图标
            ? null
            : IconButton(
                // 不为空, 是一个IconButton
                icon: _obscurePwd // 按钮图标
                    ? Icon(Icons.visibility) // 明文
                    : Icon(Icons.visibility_off), // 密文
                color: Color(0xFFcccccc),
                iconSize: 16,
                onPressed: () {
                  // 按钮被点击的回调 明文与密文切换
                  setState(() {
                    _obscurePwd = !_obscurePwd;
                  });
                },
              ),
      ),
      textAlign: TextAlign.center,
      // 文本对齐方式
      obscureText: _obscurePwd,
      // 是否是密文
      onChanged: (value) {
        // 输入框内容变化时的回调 监听
        setState(() {
          _pwdValue = value;
          checkSubmitEnable();
        });
      },
    );
  }

  ///
  /// 创建提交按钮-- 容器里面有一个按钮, 按钮上有一个图标
  ///
  Widget _createSubmitBtn() {
    return Center(
      // 居中的容器
      child: RaisedButton(
        // 按钮 有点击事件
        shape: CircleBorder(side: BorderSide(color: Color(0x00ffffff))),
        // 按钮形状
        color: Colors.blue,
        // 按钮颜色
        disabledColor: Color(0x30cccccc),
        // 按钮不可用时的颜色
        onPressed: submitEnable
            ? () {
                submit(context);
              }
            : null,
        child: Padding(
          // 内边距
          padding: EdgeInsets.all(20), // 内边距
          child: Icon(
            // 图标
            Icons.arrow_forward, // 箭头
            color: Colors.white, // 颜色
            size: 30,
          ),
        ),
      ),
    );
  }

  ///
  /// 创建忘记密码和用户注册
  ///
  Widget _createPwdAndRegister() {
    return Row(
      children: <Widget>[
        Expanded(
          // 扩展
          flex: 1, // 比例
          child: Container(), // 空白容器
        ),
        Container(
          child: Column(
            // 列 里面有两个 容器,
            children: <Widget>[
              Container(
                child: Row(
                  children: <Widget>[
                    Text(
                      '忘记密码',
                      style:
                          TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
                    ),
                    Container(
                      // 容器 里面添加一个垂直分割线
                      height: 10,
                      width: 65,
                      child: VerticalDivider(
                        // 垂直分割线
                        color: Colors.black45,
                      ),
                    ),
                    Text(
                      '用户注册',
                      style:
                          TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
              Container(
                child: _createUserAgreement(),
              ),
            ],
          ),
        ),
        Expanded(
          // 扩展
          flex: 1, // 比例
          child: Container(), // 空白容器
        ),
      ],
    );
  }

  ///
  /// 创建用户协议
  Widget _createUserAgreement() {
    return Text.rich(
      TextSpan(
          text: '登录即代表同意并阅读',
          style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
          children: [
            TextSpan(
                text: '服务协议',
                style: TextStyle(
                    color: Colors.black, fontWeight: FontWeight.bold)),
          ]),
    );
  }

  ///
  /// 创建loading
  ///
  Widget _createLoading() {
    return Center(
      // 居中 容器
      child: Container(
        // 容器
        height: 100,
        width: 100,
        decoration: BoxDecoration(
            // 装饰
            color: Color(0xFFEBEBF5),
            borderRadius: BorderRadius.all(
              Radius.circular(20),
            )),
        child: CupertinoActivityIndicator(
          // ios 风格的加载动画
          radius: 20,
        ),
      ),
    );
  }
}
